<template>
  <div class="login-wrap">
    <div class="login-title">手机号登录</div>
    <div class="login-info">
      <div class="login-item">
        <van-field
          v-model.trim="phone"
          type="number"
          :readonly="readonly"
          placeholder="输入手机号"
          @input="phoneChange"
        />
      </div>
      <div class="login-item">
        <van-field v-model="code" center placeholder="请输入短信验证码" maxlength="6">
          <van-button
            slot="button"
            size="small"
            :class="['custom-btn',{'btn-disabled':!btnColorActive}]"
            :disabled="disabled"
            type="default"
            @click="getVerifyCode"
          >{{ btnTitle }}</van-button>
        </van-field>
      </div>
      <div class="login-item no-border btn-item">
        <van-button
          type="custom-primary"
          size="large"
          block
          :disabled="!disabled && !code"
          :loading="loadingState"
          loading-text="登录中..."
          @click="toLogin"
        >登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Row, Col, Button, Field, Toast } from "vant"; // Toast, Dialog
import { validatePhone, validateBtn } from "@/assets/js/utils";
import { sendVcode, login } from "@/api/api";
import { mapActions } from "vuex";
export default {
  name: "login",
  components: {
    vanButton: Button,
    vanRow: Row,
    vanCol: Col,
    vanField: Field,
  },
  data() {
    return {
      phone: "",
      readonly: false,
      code: "",
      disabled: false,
      btnTitle: "获取验证码",
      btnColorActive: false,
      loadingState: false,
    };
  },
  methods: {
    ...mapActions("useInfo", ["setToken"]),
    // 电话输入值变化
    phoneChange(value) {
      this.btnColorActive = /^1[3456789]\d{9}$/.test(value) ? true : false;
    },
    // 发送验证码
    getVerifyCode() {
      let that = this;
      if (validatePhone(this.phone)) {
        that.$nextTick(function () {
          validateBtn(that.btnTitle, that.disabled, that);
        });
        sendVcode({
          phone: this.phone,
          accessToken: this.$route.query.accessToken
            ? this.$route.query.accessToken
            : "",
        }).then((res) => {
          if (res.code === 200000) {
            Toast("验证码发送成功");
          } else {
            Toast(res.msg);
          }
        });
      }
    },
    // 登录
    toLogin() {
      this.loadingState = true;
      login({
        phone: this.phone,
        vcode: this.code,
      }).then((res) => {
        this.loadingState = false;
        if (res.code == 200000) {
          this.setToken(res.data);
          this.$router.push({
            path: "/accountCenter",
          });
        } else {
          Toast(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-item {
  border-bottom: 1px solid #ececec;
  margin: 0 25px;
}
.login-title {
  font-size: 22px;
  margin: 90px 0 75px 25px;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  line-height: 31px;
}
.btn-item {
  margin-top: 85px;
}

.custom-btn,
.custom-btn:active {
  border: none;
  background: #fff !important;
  background-color: #fff;
  font-size: 16px;
  font-weight: 400;
  color: rgba(65, 151, 245, 1);
}
.custom-btn::before {
  background: #fff;
}

.custom-btn.btn-disabled {
  color: rgba(147, 147, 148, 1);
}
</style>
